<template>
    <show-modal :title="title" :loading="loading" width="624px" @cancel="cancel" @submit="submit">
        <a-spin :spinning="loading" tip="加载数据...">
            <a-transfer
                :data-source="mockData"
                :titles="['未选设备', '关联设备']"
                show-search
                :operations="['选择', '移除']"
                :filter-option="filterOption"
                :target-keys="targetKeys"
                :rowKey="record => record.helmetCode"
                :render="item => `${item.helmetCode}-${item.helmetName}`"
                @change="handleChange"
            />
        </a-spin>
    </show-modal>
</template>
<script>
import helmetApi from '@/api/device';
export default {
    name: 'deviceTransfer',
    props: {
        ids: {
            type: Array,
            default: () => []
        },
        info: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            title: '选择设备',
            loading: false,
            mockData: [],
            targetKeys: this.ids
        };
    },
    created() {
        if(this.info){
            let { devices=[] } = this.info;
            let deviceKeys = [];
            if (devices && devices.length) {
                devices.map(item => {
                    deviceKeys.push(item.helmetCode);
                });
            }
            this.targetKeys = deviceKeys;
        }
        this.getHelmetList();
    },
    methods: {
        // 确定保存
        submit() {
            let targetKeys = this.targetKeys;
            let mockData = this.mockData;
            let list = [];
            targetKeys.map(target => {
                let item = mockData.find(mock => mock.helmetCode == target);
                list.push(item);
            });
            this.$emit('submit', { devices: list });
        },
        //获取设备列表
        async getHelmetList() {
            try {
                this.loading = true;
                let res = await helmetApi.remoteList({ page: 1, size: 1000,ctgCode:'helmet' });
                let { data } = res;
                this.mockData = data.list;
            } finally {
                this.loading = false;
            }
        },
        handleChange(targetKeys) {
            this.targetKeys = targetKeys;
        },
        filterOption(inputValue, option) {
            return option.helmetCode.indexOf(inputValue) > -1 || option.helmetName.indexOf(inputValue) > -1;
        },
        //取消
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>
<style lang="scss" scoped>
::v-deep .ant-transfer-list {
    width: 250px;
    height: calc(100vh - 200px);
}
</style>